<template>
  <div id="app">
    <!--  tag改变标签，默认<a>  -->
<!--    <router-link to="/home" tag="button" replace active-class="active">首页</router-link>-->
<!--    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->
    <!--  通过代码跳转方法  -->
<!--    <button @click="homeClick">home</button>-->
<!--    <button @click="aboutClick">about</button>-->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
<!--    <router-link :to="'/user/' + userId">用户</router-link>-->
<!--    <router-link :to="{path: '/profile', query: {-->
<!--      name: 'lv', age: 22, height: 1.75}-->
<!--    }">档案</router-link>-->
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>
    <!--避免组件重复创建和销毁，提高性能-->
    <keep-alive exclude="Profile">
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    homeClick() {
      //代码修改路由
      //this.$router.push('/home')
      this.$router.replace('/home')
    },
    aboutClick() {
      //this.$router.push('/about')
      this.$router.replace('/about')
    },
    userClick() {
      this.$router.replace('/user/' + this.userId)
    },
    profileClick() {
      this.$router.replace({
        path: '/profile',
        query: {
          name: 'kobe',
          age: 19,
          height: 1.87
        }
      })
    }
  },
  data() {
    return {
      userId: 'lv'
    }
  }

}
</script>

<style>
  .active{
    color: #ff0000;
  }
</style>
